<template>
    <div class="navbar" @contextmenu.stop.prevent="$refs.ctxshow.showMenu($event)">
        <e-vue-contextmenu ref="ctxshow" id="contextStyle" @ctx-show="show" @ctx-hide="hide">
            <div class="deleteLeft" v-if="name > 1" @click="deleteLeft"> <i class="el-icon-back"></i> <span>删除左侧</span></div>
            <div class="deleteRight" v-if="name > 0 && name < this.tabList.length - 1" @click="deleteRight"><i class="el-icon-right"></i><span>删除右侧</span></div>
            <div class="deleteLeft" v-if="name != 0" @click="copy"> <i class="el-icon-document"></i> <span>导出参数</span></div>
        </e-vue-contextmenu>
        <el-tabs  v-if="tabList.length" :before-leave="beforeIndex" @tab-remove="deleteTab" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane  :closable="index?true:false"  v-for="(item,index) in tabList" :key="index" :label="item.title" :name="index+''"></el-tab-pane>
        </el-tabs>
        <div class="navbar_title" v-else>
            暂存区
        </div>
    </div>
</template>

<script>
export default {
    name: 'navbar',
    data(){
        return{
            isCollapse: false,
            activeName:'0',
        }
    },
    props: {
        /**
         *  @tabList    渲染的tablist数据
         */
        tabList: {
            type: Array
        },
        name:{
            type: String
        }
    },
    components: {

    },
    created () {
      
    },
    mounted: function() {
        this.getActiveIndex(this.name*1)
    },
    computed:{
        
    },
    methods:{   
        deleteLeft(){   //删除左侧
            this.$emit('deleteLeftTop',this.name)
            this.hideMenu()
        },
        deleteRight(){   //删除右侧
            this.$emit('deleteRightTop',this.name)
            this.hideMenu()
        },
        copy(){
            this.$emit('copy',this.name)
            this.hideMenu()
        },
        hideMenu() {
            this.$refs.ctxshow.hideMenu(); // 隐藏菜单
        },
        show() {
            // console.log('菜单显示了')
        },
        hide() {
            // console.log('菜单隐藏了')
        },
        handlerSql() {
            // 自定义事件
        },
        //修改active
        getActiveIndex(index,type){
            this.activeName = index + ''
            if(type) this.$emit('changeTop',this.activeName)
        },
        handleOpen(key, keyPath) {
        },
        handleClose(key, keyPath) {
        },
        handleClick(tab, event) {
            // this.$emit('changeTop',tab.index)
        },
        deleteTab(name){    //删除某个标签
            // console.log(name)
            this.$emit('deleteTab',name)
        },
        beforeIndex(activeName,oldActiveName){
            // console.log(111)
            this.$emit('changeTop',activeName,oldActiveName)  //代表进行切换时 当时的index
        }
    }
}
</script>
<style lang="scss" scope>
.navbar {
    height: 50px;
    line-height: 50px;
    border-radius: 0px !important;
    .navbar_title{
        text-align: center;
        background:#f5f5f5;
        color:#666;
    }
    
}
#contextStyle{
    width:100px;
    .deleteLeft{
        text-align: center;
        cursor:pointer;
    }
    .deleteRight{
        text-align: center;
        cursor:pointer;
    }
    .deleteLeft:hover{ 
        color:red;
    }
    .deleteRight:hover{ 
        color:red;
    }
}
</style>